<script lang="tsx">
import {
  defineComponent,
  ref,
  computed,
  type PropType,
  type ExtractPropTypes,
  watchEffect,
  watch
} from 'vue'
import { ElCheckboxGroup, ElCheckbox } from 'element-plus'
import { merge } from 'lodash-es'
import {
  omitSelfProps,
  makeValue,
  IgnoreProps,
  type BaseType,
  type SimpleKeyValueObject,
  type SimpleKeyArrayObject
} from './utils'
export const oCheckboxSelfProps = {
  formData: {
    type: Object,
    required: true
  },
  prop: {
    type: String,
    required: true
  },
  perm: {
    type: String,
    default: 'true'
  },
  visiable: {
    type: Boolean,
    default: true
  },
  options: {
    type: Array<string | number>
  },
  field: {
    type: String,
    default: 'label'
  },
  returnField: {
    type: String,
    default: 'value'
  },
  ...IgnoreProps
}
export const oCheckboxProps = {
  ...ElCheckbox.props,
  ...oCheckboxSelfProps
}
export type oCheckboxPropsType = ExtractPropTypes<typeof oCheckboxProps>
const oCheckbox = defineComponent({
  name: 'one-checkbox',
  props: oCheckboxProps,
  components: { ElCheckboxGroup, ElCheckbox },
  setup(props: oCheckboxPropsType, context) {
    const inProps = omitSelfProps<
      oCheckboxPropsType,
      typeof oCheckboxSelfProps
    >(props, oCheckboxSelfProps)
    return () => (
      <ElCheckboxGroup
        {...inProps}
        class={oCheckbox.name}
        v-model={props.formData![props.prop!]}
        v-slots={context.slots}
      >
        {props.options!.map((item: SimpleKeyArrayObject) => {
          return (
            <ElCheckbox
              key={item[props.field]}
              label={item[props.field]}
              disabled={!!item.disabled}
            ></ElCheckbox>
          )
        })}
      </ElCheckboxGroup>
    )
  }
})
export default oCheckbox
</script>
<style lang="scss" scoped></style>
